<template>
  <el-row>
    <el-col :span="20" />
    <el-col :span="2">
      <el-button @click="RedirectToRecallWordPage">返回背单词</el-button>
    </el-col>
  </el-row>
  <el-row />
  <el-row />
  <el-row>
    <el-col :span="8" />
    <el-col :span="8">
      <vxe-table
      border
      :column-config="{resizable: true}"
      :scroll-y="{enabled: true, gt: 0}"
      :edit-config="{mode: 'row', trigger: 'click'}"
      :data="test_data">
        <vxe-column field="word" title="单词" min-width="200"></vxe-column>
        <vxe-column field="proficiency" title="熟练度" min-width="200" :edit-render="proficiencyOptions"></vxe-column>
      </vxe-table>
      <el-button @click="Print">打印</el-button>
    </el-col>
  </el-row>
</template>

<script setup lang="ts">
import { ref,reactive } from 'vue';
import { useRouter } from 'vue-router';
import type { VxeTablePropTypes,VxeColumnPropTypes } from 'vxe-table'

const router = useRouter();

interface RowData {
  word: string;
  proficiency: number;
  id:number
}

const proficiencyOptions = reactive<VxeColumnPropTypes.EditRender>({
  name: 'select',
  options: [
  { label: '完全掌握', value: 100 },
  { label: '不确定', value: 70 },
  { label: '有印象', value: 50 },
  { label: '未掌握', value: 30 },
  { label: '完全不懂', value: 0 }
  ]
})

const test_data = ref<VxeTablePropTypes.Data<RowData>>([
  { word: "abandon", proficiency: 0, id:1},
  { word: "abc", proficiency: 70, id:1},
  { word: "ccc", proficiency: 30, id:1},
  { word: "ddd", proficiency: 100, id:1},
]);


function RedirectToRecallWordPage() {
  router.push('recall-word');
}


// 测试
function Print(){
  console.log(test_data)
}
</script>

<style>
.table-v2-inline-editing-trigger {
  cursor: pointer;
  padding: 4px;
}
.table-v2-inline-editing-trigger:hover {
  border: 1px dashed var(--el-color-primary);
}
</style>
